/** biome-ignore-all lint/suspicious/noExplicitAny: This use requires any */
"use client";

import type * as React from "react";

import { useCalloutEmojiPicker } from "@platejs/callout/react";
import { useEmojiDropdownMenuState } from "@platejs/emoji/react";
import { PlateElement } from "platejs/react";

import { Button } from "@/components/plate/ui/button";
import { cn } from "@/lib/utils";

import { EmojiPicker, EmojiPopover } from "./emoji-toolbar-button";

export function CalloutElement({
  attributes,
  children,
  className,
  ...props
}: React.ComponentProps&lt;typeof PlateElement&gt;) {
  const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
    closeOnSelect: true,
  });

  const { emojiToolbarDropdownProps, props: calloutProps } =
    useCalloutEmojiPicker({
      isOpen,
      setIsOpen,
    });

  return (
    &lt;PlateElement
      className={cn("my-1 flex rounded-sm bg-muted p-4 pl-3", className)}
      style={{
        backgroundColor: props.element.backgroundColor as any,
      }}
      attributes={{
        ...attributes,
        "data-plate-open-context-menu": true,
      }}
      {...props}
    &gt;
      <div>
        &lt;EmojiPopover
          {...emojiToolbarDropdownProps}
          control={
            &lt;Button
              variant="ghost"
              className="size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15"
              style={{
                fontFamily:
                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols',
              }}
              contentEditable={false}
            &gt;
              {(props.element.icon as any) || "💡"}
            &lt;/Button&gt;
          }
        &gt;
          &lt;EmojiPicker {...emojiPickerState} {...calloutProps} /&gt;
        &lt;/EmojiPopover&gt;
        <div>{children}</div>
      </div>
    &lt;/PlateElement&gt;
  );
}
